<template>
  <div>
    <el-menu :default-active="defaultActive" class="Menu border-0" :style="{width:mainStore.SiderLength}" @select="handleSelect"  :collapse="isCollapse">
      <template v-for="(item, index) in MenuDatas" :key="index">
        <el-sub-menu
          v-if="item.child && item.child.length > 0"
          :index="item.name"
        >
          <template #title>
            <el-icon><component :is="item.icon"></component></el-icon>
            <span>{{ item.name }}</span>
          </template>
          <el-menu-item
            v-for="(item2, index2) in item.child"
            :key="index2"
            :index="item2.frontpath"
          >
            <component :is="item2.icon" style="height: 24px; width: 24px;"></component>
            <span>{{ item2.name }}</span>
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu v-else :index="item.frontpath">
          <component :is="item.icon"></component>
          <span>{{ item.name }}</span>
        </el-sub-menu>
      </template>
    </el-menu>
  </div>
  
 

</template>

<script setup>
//获取router
import { useRouter, useRoute } from 'vue-router';
import { usemainStore } from '@/stores/mainStore';
import { onMounted, ref, watch } from 'vue';


//跳转
const router = useRouter();
const route = useRoute();
const handleSelect = (e) => {
  router.push(e);
};

//折叠
const mainStore = usemainStore();
const isCollapse = ref(false);
watch(() => (mainStore.SiderLength), () => {
  isCollapse.value = !(mainStore.SiderLength == '250px');
});

//侧边栏数据
mainStore.getUser();
const MenuDatas = mainStore.menus;

//默认选中
const defaultActive = ref(route.path);


</script>

<style lang="less" scoped>
.Menu {
  position: fixed;
  top: 60px;
  bottom: 0px;
  left: 0px;
  width: 250px;
  @apply bg-light-100;
  transition: all 0.1s;
  overflow-y:auto;
}

.Menu::-webkit-scrollbar
{
  width: 0px;
}
 .el-aside 
{
  width: 250px;
}

</style>